<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="评价详情" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		
		<view class="showcase_item item_warp" v-if="orderInfo">
			<view class="showcase_head user_head"> 
				<image v-if="type==1"  @tap.stop="$go('/pages/my/my?id=' + orderInfo.user&&orderInfo.user.membe_id)" :src="orderInfo.user&&orderInfo.user.pic | formatImgUrl" mode="aspectFill" class="pic"></image>
				<image v-else :src="orderInfo.user&&orderInfo.user.pic | formatImgUrl" mode="aspectFill" class="pic" @tap.stop="$go('/pages/my/my?id=' +  orderInfo.user&&orderInfo.user.membe_id)"></image>
				<view class="user_box">
					<view class="top">
						<text class="tit">{{orderInfo.user && orderInfo.user.username}}</text>
						<view class="tip suc" v-if="order_eval.rank==5">
							很满意
						</view>
						<view class="tip suc" v-if="order_eval.rank==4">
							满意
						</view>
						<view class="tip zhong" v-if="order_eval.rank==3">
							一般
						</view>
						<view class="tip" v-if="order_eval.rank==2">
							不满
						</view>
						<view class="tip" v-if="order_eval.rank==1">
							很不满
						</view>
					</view>
					<view class="user_info">
						{{orderInfo.order_eval_times}}完成订单
					</view>
				</view>
				<image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="" @tap.stop="show=true,aid=orderInfo.id"></image>
			</view>
			<view class="showcase_content">
				{{order_eval.eval_row?order_eval.eval_row:"这位单主什么都没有留下"}}
			</view>
			<view class="jiebox" @tap.stop="$go('/pages/my/connect?id='+orderInfo.id)">
				<view class="left">
					<view class="ltop">
						<image :src="'/images/je.png' | formatImgUrl" class="lpic" mode="aspectFit"></image>
						<view class="ltitle oneline">
							{{orderInfo.c_title}}
						</view>
					</view>
					<view class="ltxt">
						{{orderInfo.c_desc || ''}}<text> | 共{{orderInfo.num}}单</text><text> | 共{{orderInfo.num}}{{orderInfo.c_word_count}}</text>
					</view>
				</view>
				<view class="ytxt">
					<text>本单共计</text>{{orderInfo.price}}<text style="color: #45C4B0;">币</text>
				</view>
			</view>
		</view>
		<view class="ding" v-if="orderInfo && orderInfo.user && order_eval">
			<view class="top">
				<view class="pititle">
					用户评价
				</view>
			</view>
			<view class="score">
				<text>效率</text> 
				<image :src="'/images/star11.png' | formatImgUrl" class="spic" v-for="rank in order_eval.efficiency" mode="aspectFit">
				</image>
				<image :src="'/images/star22.png' | formatImgUrl" class="spic" v-for="rank in 5-order_eval.efficiency" mode="aspectFit">
				</image>
			</view>
			<view class="score">
				<text>内容</text> 
				<image :src="'/images/star11.png' | formatImgUrl" class="spic" v-for="rank in order_eval.cont" mode="aspectFit">
				</image>
				<image :src="'/images/star22.png' | formatImgUrl" class="spic" v-for="rank in 5-order_eval.cont" mode="aspectFit">
				</image>
			</view>
			<view class="score">
				<text>文笔</text> 
				<image :src="'/images/star11.png' | formatImgUrl" class="spic" v-for="rank in order_eval.writings" mode="aspectFit">
				</image>
				<image :src="'/images/star22.png' | formatImgUrl" class="spic" v-for="rank in 5-order_eval.writings" mode="aspectFit">
				</image>
			</view>
			<!-- <textarea maxlength="10000000000000" class="shubox" placeholder="请输入您的评价" v-model="order_eval.eval_row"></textarea> -->
		</view>
		
		<u-popup :show="show" @close="show=false">
			<view class="mask">
				<block v-if="orderInfo&&orderInfo.user&&orderInfo.user.membe_id == $db.get('userInfo').membe_id">
					<view class="matop" @tap="show=false,showEdit=true" v-if="order_eval.is_gai == 1">
						<view class="matxt">
							修改 <text>（还有一次修改机会）</text>
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
					<view class="matop" :style="{'margin-top': order_eval.is_gai == 1 ? '-10px' : '0'}" @tap="show=false,showConfirm=true">
						<view class="matxt">
							删除
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</block>
				<block v-else>
					<view class="matop" @click="goToreport">
						<view class="matxt">
							申诉
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</block>
				
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="center" :show="showEdit" @close="showEdit=false">
			<view class="mask2">
				<view class="matitle">
					是否确定修改评价
				</view>
				<view class="matxt">
					每条评价至多可修改一次
				</view>
				<view class="quque">
					<view class="quli" @click="showEdit=false">
						取消
					</view>
					<view class="quli quactive" @tap="showEdit=false,$go('/pages/user/evaluate?id='+aid + '&isEdit=1')">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="center" :show="showConfirm" @close="showConfirm=false">
			<view class="mask2">
				<view class="matitle">
					是否确定删除评价
				</view>
				<view class="matxt">
					此操作不可逆
				</view>
				<view class="quque">
					<view class="quli" @click="showConfirm=false">
						取消
					</view>
					<view class="quli quactive" @tap="shanchu">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default { 
		data() {
			return {
				emojiList:[
					{
						url:'/uploads/api/emoji1.png',
						url_clone:'/uploads/api/emoji11.png',
						text:'很满意',
						value:'5'
					},
					{
						url:'/uploads/api/emoji2.png',
						url_clone:'/uploads/api/emoji21.png',
						text:'满意',
						value:'4'
					},
					{
						url:'/uploads/api/emoji3.png',
						url_clone:'/uploads/api/emoji31.png',
						text:'一般',
						value:'3'
					},
					{
						url:'/uploads/api/emoji4.png',
						url_clone:'/uploads/api/emoji41.png',
						text:'不满',
						value:'2'
					},
					{
						url:'/uploads/api/emoji5.png',
						url_clone:'/uploads/api/emoji51.png',
						text:'很不满',
						value:'1'
					},
				],
				type:0,
				count: 5,
				form:{
					oid:'',
					rank:5,
					eval_row:'',
					efficiency:5,
					cont:5,
					writings:5
					
				},
				orderInfo:null,
				order_eval: {},
				show: false,
				showConfirm: false,
				showEdit: false,
				aid: ''
			}
		},
		onLoad(e) {
			if(e.id){
				this.form.oid = e.id
			}else{
				this.$common.errorToShow('参数异常')
			}
			this.type = e.type
		},
		onShow() {
			this.getOrderInfo();
		},
		methods: {
			// 删除评价
			shanchu(){
				this.$api.default.request('order/DelEval', {
					id: this.aid
				}).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							uni.navigateBack();
						})
					}
				})
			},
			goToreport() {
				this.show = false
				
				uni.navigateTo({
					url: '/pages/find/reportEva?id=' + this.aid + '&type=' + this.type + '&newtype=0'
				})
			},
			looks(type){
				//计算 满意程度
				//efficiency:5,
				// 
				let that = this;

					setTimeout(function(){
						let max_star = that.form.efficiency + that.form.cont + that.form.writings;
						console.log(max_star,that.form.efficiency,that.form.cont, that.form.writings,9797979766);
						if(max_star >= 13){
							that.form.rank = 5
						}else if(max_star >= 10){
							that.form.rank = 4
						}else if(max_star >= 7){
							that.form.rank = 3
						}else if(max_star >= 4){
							that.form.rank = 2
						}else{
							that.form.rank = 1
						}
					},100)
				
			},
			getOrderInfo(id) {
				this.$api.default.request('order/orderInfo', {
					id: this.form.oid
				}).then((res) => {
					if (res.code) {
						this.orderInfo = res.data
						this.order_eval = res.data.order_eval
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-icon__icon{
		color: #45C4B0!important;
	}
	page {
		background: rgba(242, 245, 242, 1);
	}
	.content {
		padding-top: 20rpx;
		
		.ding{
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 40rpx 60rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.pititle{
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}
			}
			.user_box{
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					object-fit: cover;
				}
				
				.info{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 12rpx;
					.username{
						display: flex;
						font-size: 28rpx;
						font-weight: bold;
						align-items: center;
						color: #3D3D3D;
						image{
							width: 100rpx;
							height: 43rpx;
							margin-left: 8rpx;
							object-fit: cover;
						}
					}
					.finish_time{
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.emoji_evaluate{
				margin-top: 40rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.item{
					display: flex;
					flex-direction: column;
					justify-items: center;
					align-items: center;
					image{
						width: 28rpx;
						height: 28rpx;
						object-fit: cover;
						margin-bottom: 8rpx;
					}
					.text{
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.score{
				margin-top: 34rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
				display: flex;
				align-items: center;
				
				.spic {
					width: 45rpx;
					height: 45rpx;
					margin-left: 10px;
				}
			}
		}
		
		.shubox{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 8rpx;
			border-radius: 8rpx;
			color: #3d3d3d;
			font-size: 28rpx;
			height: 280rpx;
			margin-top: 30rpx;
			background: rgba(216, 216, 216, 0.3);
		}
		.ti{
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}
	}
	
	.showcase_item {
		padding: 30rpx 30rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
		.user_head {
			.pic {
				width: 80rpx !important;
				height: 80rpx !important;
				border-radius: 50%;
				margin-right: 20rpx;
			}
	
			.top {
				display: flex;
				align-items: center;
				.suc{
					background: rgba(69, 196, 176, 0.15);
					color: #45C4B0;;
				}
				.zhong{
					background: rgba(255, 170, 0, 0.15);
					color: #ffaa00;
				}
			}
	
			.user_info {
				font-size: 24rpx;
				font-weight: normal;
				color: #999999;
				margin-top: 5rpx;
			}
		}
	
		.showcase_head {
			display: flex;
			position: relative;
			align-items: center;
	
			image {
				width: 32rpx;
				height: 32rpx;
			
				margin-right: 8rpx;
			}
	
			.tit {
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
			}
			.tits{
				width: 90%;
			}
	
			.tip {
				font-size: 20rpx;
				font-weight: normal;
				color: #999999;
				padding: 2rpx 8rpx;
				background: rgba(153, 153, 153, 0.15);
				border-radius: 8rpx;
				margin-left: 16rpx;
			}
	
			.jubox {
				position: absolute;
				top: 6rpx;
				right: 0rpx;
				width: 32rpx;
				height: 32rpx;
				// border: 1px dashed #eeeeee;
			}
		}
	
		.showcase_content {
			font-size: 26rpx;
			font-weight: normal;
			color: #3d3d3d;
			margin: 18rpx 0 30rpx;
			word-break: break-all;
		}
	
		.showcase_wrap {
			margin-top: 28rpx;
			display: grid;
			grid-gap: 28rpx 24rpx;
			grid-template-columns: repeat(auto-fill, 300rpx);
			padding-bottom: 20rpx;
	
			.wrap_item {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				color: #999999;
	
				image {
					width: 24rpx;
					height: 24rpx;
					object-fit: cover;
					margin-right: 4rpx;
				}
			}
		}
	}
	
	.jiebox {
		padding: 20rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: #F8F8F8;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	
		.left {
			flex-shrink: 0;
	
			.ltop {
				display: flex;
				align-items: center;
				padding-bottom: 18rpx;
	
				.lpic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}
	
				.ltitle {
					padding-left: 6rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}
			}
	
			.ltxt {
				font-size: 20rpx;
				color: #3D3D3D;
	
				text {
					padding-left: 10rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
	
		.ytxt {
			font-size: 36rpx;
			font-weight: bold;
			color: #45C4B0;
	
			text {
				font-size: 20rpx;
				color: #999999;
				padding: 0 8rpx;
				font-weight: normal;
			}
		}
	}
	
	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;
	
		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;
	
			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
	
			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				
				text{
					font-family: Source Han Sans;
					font-size: 10px;
					color: #45C4B0;
					margin-left: 4px;
				}
			}
		}
	
		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}
	
	.mask2 {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;
	
		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
	
		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
	
		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	
			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
	
			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
</style>